<template>

	<view class="content ">
		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<view class="head flex justify-between bg-white">
			<view class="basis-sm margin-xs padding-sm  text-bold text-right">
				{{info.hostName}}
			</view>
			<view class="basis-xs margin-xs padding-sm text-bold  text-center">
				VS
			</view>
			<view class="basis-sm margin-xs padding-sm  text-bold text-left">
				{{info.guestName}}
			</view>
		</view>
		<scroll-view scroll-y="true" style="width: 100%;" :style="{height:scrollH+'px'}" class="text-sm">
			<view class="grad-box flex ">
				<view class="grad-box-left ">
					<view class="grad-left-box1 ">
						<view class="middle bg-E5E5E5 ">
							0
						</view>
						<view class="middle bg-acc7ee ">
							{{checkRate(info.rate,0)}}
						</view>
					</view>

				</view>
				<view class="grad-box-bodty ">
					<view class="grid col-3  text-center head-tou ">

						<view class="bg-FFFFFF border-gray-top border-gray-right padding-sm"
							v-for="(s,index) in host.arr" @click="selectFn(s.key)" :class="select[s.key]?'selected':''">
							{{ s.key==host.rule[0]?'胜':s.key==host.rule[1]?"平":s.key==host.rule[2]?"负":'' }} <text
								class="" :class="select[s.key]?'text-white':'text-777777'">{{toFix(s.val)}}
							</text>
						</view>


						<view class="bg-FFFFFF border-gray-top border-gray-bottom border-gray-right padding-sm"
							v-for="(s,index) in gust.arr" @click="selectFn(s.key)" :class="select[s.key]?'selected':''">
							{{ s.key==gust.rule[0]?'胜':s.key==gust.rule[1]?"平":s.key==gust.rule[2]?"负":'' }}<text
								:class="select[s.key]?'text-white':'text-777777'">{{s.val}}</text>
						</view>

					</view>

				</view>


			</view>


			<view class="grad-box flex ">
				<view class="grad-box-left ">
					<view class="grad-left-box1 middle text-center padding-sm bg-E5E5E5">
						半全场
					</view>
				</view>
				<view class="grad-box-bodty  ">
					<view class="grid col-3  text-center head-tou ">

						<view class="bg-FFFFFF border-gray-top   border-gray-right padding-sm"
							v-for="(sheng,index) in s.arr" @click="selectFn(sheng.key)"
							:class="select[sheng.key]?'selected':''">
							<view>{{ sheng.key==s.rule[0]?"胜胜":sheng.key==s.rule[1]?"胜平":sheng.key==s.rule[2]?"胜负":'' }}
							</view>
							<view :class="select[sheng.key]?'text-white':'text-777777'">{{toFix(sheng.val)}}</view>
						</view>


						<view class="bg-FFFFFF border-gray-top border-gray-bottom border-gray-right padding-sm"
							v-for="(s,k) in p.arr" @click="selectFn(s.key)" :class="select[s.key]?'selected':''">

							<view>{{ s.key==p.rule[0]?"平胜":s.key==p.rule[1]?"平平":s.key==p.rule[2]?"平负":'' }}</view>
							<view :class="select[s.key]?'text-white':'text-777777'">{{toFix(s.val)}}</view>
						</view>


						<view class="bg-FFFFFF  border-gray-right padding-sm" v-for="(s,k) in f.arr"
							@click="selectFn(s.key)" :class="select[s.key]?'selected':''">
							<view>{{ s.key==f.rule[0]?"负胜":s.key==f.rule[1]?"负平":s.key==f.rule[2]?"负负":'' }}</view>
							<view :class="select[s.key]?'text-white':'text-777777'">{{toFix(s.val)}}</view>
						</view>

					</view>

				</view>


			</view>


			<view class="grad-box flex ">
				<view class="grad-box-left ">
					<view class="grad-left-box1 middle text-center padding-sm bg-yellow">
						总进球

					</view>
				</view>
				<view class="grad-box-bodty ">
					<view class="grid col-4  text-center head-tou ">

						<view class="bg-FFFFFF  border-gray-right padding-sm" v-for="(s,index) in bifen.t"
							@click="selectFn(s.key)" :class="select[s.key]?'selected':''">
							<view>{{index==bifen.t.length-1?"+":''}} {{index}} </view>
							<view :class="select[s.key]?'text-white':'text-777777'">{{toFix(s.val)}}</view>
						</view>

					</view>

				</view>


			</view>



			<view class="grad-box flex ">
				<view class="grad-box-left ">
					<view class="grad-left-box1 middle text-center padding-sm bg-blue1">
						比分
					</view>
				</view>
				<view class="grad-box-bodty ">
					<view class="grid col-5  text-center head-tou ">

						<view class="bg-FFFFFF border-gray-right padding-sm" v-for="(s,ss) in bifen.s" :key="ss"
							:class="select[s.key]?'selected':''">
							<view v-if="s.l!='-1'" @click="selectFn(s.key)">
								<view v-if="s.l!='o'">{{s.l}} : {{s.r}}</view>
								<view v-if="s.l=='o'">胜其他</view>
								<view :class="select[s.key]?'text-white':'text-777777'" v-if="s.l!='-1'">
									{{toFix(s.val)}}
								</view>
							</view>

						</view>
						<view class="bg-FFFFFF border-gray-right padding-sm" v-for="(s,p) in bifen.p"
							:class="select[s.key]?'selected':''">
							<view v-if="s.l!='-1'" @click="selectFn(s.key)">
								<view v-if="s.l!='o'">{{s.l}} : {{s.r}}</view>
								<view v-if="s.l=='o'">平其他</view>
								<view :class="select[s.key]?'text-white':'text-777777'" v-if="s.l!='-1'">
									{{toFix(s.val)}}
								</view>
							</view>

						</view>
						<view class="bg-FFFFFF border-gray-right padding-sm" v-for="(s,f) in bifen.f"
							:class="select[s.key]?'selected':''">
							<view v-if="s.l!='-1'" @click="selectFn(s.key)">
								<view v-if="s.l!='o'">{{s.l}} : {{s.r}}</view>
								<view v-if="s.l=='o'">平其他</view>
								<view :class="select[s.key]?'text-white':'text-777777'" v-if="s.l!='-1'">
									{{toFix(s.val)}}
								</view>
							</view>
						</view>
					</view>

				</view>


			</view>


		</scroll-view>


		<view class="bottom-box  flex " id="buttom">
			<view class="basis-df bg-white middle text-bold" @click="cancel">
				取消
			</view>
			<view class="basis-df bg-red  middle text-bold" @click="sumbit">
				确定
			</view>

		</view>

	</view>



</template>

<script>
	export default {
		data() {
			return {
				info: [],
				title: "详情",
				bifen: {},
				select: [],
				scrollH: 0,
				rule: ["s", "p", "f"],
				host: {
					rule: ["sheng", "ping", "fu"],
					arr: []
				},
				gust: {
					rule: ["rqSheng", "rqPing", "rqFu"],
					arr: []
				},
				s: {
					rule: ["ss", "sp", "sf"],
					arr: []
				},
				p: {
					rule: ["ps", "pp", "pf"],
					arr: []
				},
				f: {
					rule: ["fs", "fp", "ff"],
					arr: []
				},
				option: {
					index: -1,
					i: -1,
				}


			}
		},
		onLoad(option) {
			this.info = uni.getStorageSync("signleDetal");

			this.getBifen();
			this.option.index = option.index;
			this.option.i = option.i;
			this.jiexi();
			(this.info.length == 0) ? (() => {
				uni.showModal({
					title: "提示",
					content: "暂无数据",
					confirmText: "好的",
					showCancel: false,
					success: (e) => {
						if (e.confirm) {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
			})() : "";

		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#buttom').boundingClientRect(data => {

				this.scrollH = this.WH - this.CustomBar - data.height - 50;

			}).exec();
		},

		methods: {
			jiexi() {
				uni.getStorage({
					key: this.option.i + "select" + this.option.index,
					success: (r) => {
						let dat = r.data;
						for (let i in dat) {
							this.$set(this.select, dat[i].key, dat[i].val);
						}
					},
					fail: () => {
						console.log("error");
					}
				})
			},
			selectFn(atr) {
				let val = this.select[atr];
				let isSet = false;
				if (!val) {
					isSet = true;

				}
				this.$set(this.select, atr, isSet);
			},
			sumbit() {
				uni.removeStorageSync(this.option.i + "select" + this.option.index);
				
				let pages = getCurrentPages();
				let beforePage = pages[pages.length - 2];
				beforePage.$vm.updateSite(this.select, this.option);
				uni.navigateBack({
					delta: 1,
					success: () => {

					}

				});

			},
			cancel() {
				uni.navigateBack({
					delta: 1
				})

			},
			checkRate(num, type) {
				let n = num;
				switch (type) {
					case 0:
						if (parseInt(num) > 0) {
							n = "+" + num;
						}
						break;
				}
				return n;

			},
			toFix(num) {
				return num.toFixed(2);
			},
			/**
			 * 分析比分
			 */
			getBifen() {
				let arr = {
					s: [],
					p: [],
					f: [],
					t: []
				};
				let num = {
					s: 0,
					p: 0,
					f: 0
				}
				for (let i in this.info) {
					let str = i.split("s");
					let str_p = i.split("p");
					let str_f = i.split("f");
					let t = i.split("t");
					let condtion = {
						arrt: t[0] == "" && !isNaN(t[1]) && t[1] != "" && t[1] != null,
						host: i == this.host.rule[0] || i == this.host.rule[1] || i == this.host.rule[2],
						gust: i == this.gust.rule[0] || i == this.gust.rule[1] || i == this.gust.rule[2],
						arrs: (str[0] == "" && !isNaN(str[1]) && str[1] != "" && str[1] != null) || str[1] == "other",
						arrp: (str_p[0] == "" && !isNaN(str_p[1]) && str_p[1] != "" && str_p[1] != null) || str_p[1] ==
							"other",
						arrf: (str_f[0] == "" && !isNaN(str_f[1]) && str_f[1] != "" && str_f[1] != null) || str_f[1] ==
							"other",
						s: i == this.s.rule[0] || i == this.s.rule[1] || i == this.s.rule[2],
						p: i == this.p.rule[0] || i == this.p.rule[1] || i == this.p.rule[2],
						f: i == this.f.rule[0] || i == this.f.rule[1] || i == this.f.rule[2],
					}
					if (condtion.p) { //s
						let dat = {

							key: i,
							val: this.info[i]
						}

						this.p.arr.push(dat);
					}
					if (condtion.s) { //s
						let dat = {

							key: i,
							val: this.info[i]
						}

						this.s.arr.push(dat);
					}
					if (condtion.f) { //s
						let dat = {

							key: i,
							val: this.info[i]
						}

						this.f.arr.push(dat);
					}
					if (condtion.arrt) { //s
						let dat = {

							key: i,
							val: this.info[i]
						}

						arr.t.push(dat);
					}
					if (condtion.host) {
						let dat = {

							key: i,
							val: this.info[i]
						}

						this.host.arr.push(dat);
					}
					if (condtion.gust) {
						let dat = {

							key: i,
							val: this.info[i]
						}

						this.gust.arr.push(dat);
					}


					if (condtion.arrs) { //s
						let dat = {
							l: str[1][0],
							r: str[1][1],
							key: i,
							val: this.info[i]
						}
						num.s++;
						arr.s.push(dat);
					}
					if (condtion.arrp) { //p
						let dat = {
							l: str_p[1][0],
							r: str_p[1][1],
							key: i,
							val: this.info[i]
						}
						num.p++;
						arr.p.push(dat);
					}
					if (condtion.arrf) { //f

						let dat = {
							l: str_f[1][0],
							r: str_f[1][1],
							key: i,
							val: this.info[i]
						}
						num.f++;
						arr.f.push(dat);
					}
				}
				this.bifen = arr;
				let adddat = (type) => {
					let y = (num[type]) % 5;
					let l = (y == 0) ? 0 : 5 - y;
					for (let i = 0; i < l; i++) {
						let dat = {
							l: -1,
							r: -1,
							val: ""
						}
						this.bifen[type].push(dat);
					}
				}
				for (let i in num) {
					adddat(i)
				}



			}



		}




	}
</script>

<style scoped>
	.selected {
		background-color: red;
		color: white;
	}

	.bottom-box {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 100rpx;
	}

	.grad-box {
		width: 92%;
		margin: 30rpx auto;
	}

	.grad-left-box {
		width: 70%;
		padding: 10rpx;
		flex-direction: column;
	}

	.grad-box-bodty {
		width: 92%;
		height: 100%;

	}

	.grad-left-box,
	.grad-left-box1 {
		height: 100%;
	}

	.grad-left-box1 {
		width: 100%;

	}

	.grad-left-box1 view {
		width: 100%;
		height: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.grad-box-left {
		width: 8%;
		display: flex;
		flex-wrap: nowrap;
		font-size: 22rpx;
	}

	.head-tou {
		min-height: 50rpx;
	}

	.border-gray-top {

		border-top: 1rpx solid #E1E1E1;
	}

	.border-gray-left {
		border-left: 1rpx solid #E1E1E1;
	}

	.border-gray-right {

		border-right: 1rpx solid #E1E1E1;
	}

	.border-gray-bottom {
		border-bottom: 1rpx solid #E1E1E1;

	}
</style>
